<template>
  <el-card shadow="hover">
    <el-descriptions
      class="margin-top"
      title="账号相关信息"
      :column="3"
      :size="size"
      border
    />
    <el-table v-loading="listLoading" :data="StoreList">
      <el-table-column
        align="center"
        label="店铺或账号ID"
        prop="BindStoreID"
        show-overflow-tooltip
        width="120"
      />
      <el-table-column
        align="center"
        prop="ProductName"
        label="服务产品或赠品"
      />
      <el-table-column
        align="center"
        prop="BindStoreAccount"
        label="服务对象"
      />
      <!-- <el-table-column align="center" label="账号密码" width="130">
        ******
      </el-table-column> -->
      <el-table-column
        v-if="BusinessClassID !== 5"
        align="center"
        label="是否工厂店"
        width="130"
      >
        <template #default="{ row }">
          <span v-if="row.isFactory == 0">否</span>
          <span v-if="row.isFactory == 1">是</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="实际服务期限" width="250">
        <template #default="{ row }">
          <el-button
            v-if="row.ServiceStartDate"
            type="primary"
            text
            size="small"
            @click="realityEdit(row)"
          >
            {{ row.ServiceStartDate }} 至 {{ row.ServiceEndDate }}
          </el-button>
          <el-button
            v-else
            type="primary"
            text
            size="small"
            @click="realityEdit(row)"
          >
            设置
          </el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="链接" width="70">
        <template #default="{ row }">
          <div v-if="row.StoreUrl">
            <a :href="row.StoreUrl" target="_blank">链接</a>
          </div>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="200">
        <template #default="{ row }">
          <el-button
            v-if="row.isLock"
            type="success"
            size="small"
            @click="handleEdit(row)"
          >
            账密设置
          </el-button>
          <el-button v-else type="danger" size="small" @click="handleEdit(row)">
            账密设置
          </el-button>
          <!-- <el-button size="small" @click="handleEdit(row)">解绑</el-button> -->
        </template>
      </el-table-column>
      <el-table-column align="center" label="合作周期" width="120">
        <template #default="{ row }">
          {{ row.ReNewState }}
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <domain ref="domainRef" @fetch-data="EmitData" />
  <host ref="hostRef" @fetch-data="EmitData" />
  <server ref="serverRef" @fetch-data="EmitData" />
  <email ref="emailRef" @fetch-data="EmitData" />
  <website ref="websiteRef" @fetch-data="EmitData" />
  <StoreLink ref="storeLinkRef" @fetch-data="EmitData" />
  <!-- 设置实际服务期限 -->
  <order-service-date ref="orderServiceDateRef" @fetch-data="EmitData" />
</template>

<script>
  import OrderServiceDate from '@/views/business/components/OrderServiceDate'
  import { showPassword } from '@/api/businessOrder'
  import Domain from '@/views/business/components/Domain'
  import Host from '@/views/business/components/Host'
  import Server from '@/views/business/components/Server'
  import Email from '@/views/business/components/Email'
  import Website from '@/views/business/components/Website'
  import StoreLink from '@/views/business/components/StoreLink'

  export default defineComponent({
    name: 'ShopList',
    components: {
      OrderServiceDate,
      StoreLink,
      Domain,
      Host,
      Server,
      Email,
      Website,
    },
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const state = reactive({
        orderServiceDateRef: null,
        storeLinkRef: null,
        websiteRef: null,
        emailRef: null,
        hostRef: null,
        serverRef: null,
        domainRef: null,
        disabled: false,
        OrderFlowState: 1,
        OrderID: 0,
        StoreList: [],
        title: '',
        editShopDialog: false,
        BusinessClassID: 0,
        LoginStaffID: 0,
        SaleStaffID: 0,
      })

      const handleEdit = async (row) => {
        console.log('shopLinkForm', row)
        const businessClass = row.BusinessClassID
        // state.BusinessClassID = row.BusinessClassID
        switch (businessClass) {
          case 1:
            if (row.BindID != 0 && row.isLock) {
              if (await open(row)) {
                state.storeLinkRef.showEdit(row, true)
              }
            } else {
              state.storeLinkRef.showEdit(row, false)
            }
            break
          case 2:
            if (row.BindID != 0 && row.isLock) {
              if (await open(row)) {
                state.storeLinkRef.showEdit(row, true)
              }
            } else {
              state.storeLinkRef.showEdit(row, false)
            }
            break
          case 3:
            if (row.BindID != 0 && row.isLock) {
              if (await open(row)) {
                state.storeLinkRef.showEdit(row, true)
              }
            } else {
              state.storeLinkRef.showEdit(row, false)
            }
            break
          case 4:
            if (row.BindID != 0 && row.isLock) {
              if (await open(row)) {
                state.storeLinkRef.showEdit(row, true)
              }
            } else {
              state.storeLinkRef.showEdit(row, true)
            }
            break
          case 5:
            if (row.ProductID == 63) {
              if (row.BindID != 0 && row.isLock) {
                if (await open(row)) {
                  state.domainRef.showEdit(row, true)
                }
              } else {
                state.domainRef.showEdit(row, true)
              }
            } else if (row.ProductID == 64) {
              if (row.BindID != 0 && row.isLock) {
                if (await open(row)) {
                  state.hostRef.showEdit(row, true)
                }
              } else {
                state.hostRef.showEdit(row, true)
              }
            } else if (row.ProductID == 65) {
              if (row.BindID != 0 && row.isLock) {
                if (await open(row)) {
                  state.serverRef.showEdit(row, true)
                }
              } else {
                state.serverRef.showEdit(row, true)
              }
            } else if (row.ProductID == 67) {
              if (row.BindID != 0 && row.isLock) {
                if (await open(row)) {
                  state.emailRef.showEdit(row, true)
                }
              } else {
                state.emailRef.showEdit(row, true)
              }
            } else if (
              row.ProductID == 68 ||
              row.ProductID == 69 ||
              row.ProductID == 70 ||
              row.ProductID == 107 ||
              row.ProductID == 108
            ) {
              if (row.BindID != 0 && row.isLock) {
                if (await open(row)) {
                  state.websiteRef.showEdit(row, true)
                }
              } else {
                state.websiteRef.showEdit(row, true)
              }
            } else {
              if (row.BindID != 0 && row.isLock) {
                if (await open(row)) {
                  state.storeLinkRef.showEdit(row, true)
                }
              } else {
                state.storeLinkRef.showEdit(row, true)
              }
            }
            break
          default:
            if (row.BindID != 0 && row.isLock) {
              if (await open(row)) {
                state.storeLinkRef.showEdit(row, true)
              }
            } else {
              state.storeLinkRef.showEdit(row, false)
            }
        }
        // 域名的63
        // state.domainRef.showEdit(row)
        // 主机的64
        // state.hostRef.showEdit(row)
        // 邮箱的67
        // state.emailRef.showEdit(row)
        // 网站 68,69,70,107.108
        // state.websiteRef.showEdit(row)
      }
      const EmitData = () => {
        emit('fetch-data')
      }

      const showList = (OrderInfo, list) => {
        state.OrderID = OrderInfo.OrderID
        state.SaleStaffID = OrderInfo.SaleStaffID
        state.BusinessClassID = OrderInfo.BusinessClassID
        state.OrderFlowState = Math.abs(OrderInfo.OrderFlowState)
        if (state.OrderFlowState >= 4) {
          state.disabled = true
        }
        state.StoreList = list
        console.log(state.StoreList, '  state.StoreList  state.StoreList')
      }

      const open = async (row) => {
        let flag
        await ElMessageBox.prompt('请输入密码', '', {
          confirmButtonText: '确认',
          cancelButtonText: '关闭',
        })
          .then(async ({ value }) => {
            const dataMsg = {
              StoreID: row.BindStoreID,
              ShowPassword: value,
            }
            const { data } = await showPassword(dataMsg)
            console.log(data, typeof data)

            if (data) {
              flag = true
            } else {
              flag = false
              ElMessage({
                type: 'warning',
                message: `密码输入错误`,
              })
            }
          })
          .catch(() => {
            flag = false
          })
        return flag
      }

      // 设置实际服务时间
      const realityEdit = (row) => {
        const userInfo = JSON.parse(localStorage.getItem('userInfo'))
        state.LoginStaffID = userInfo.StaffID
        if (state.LoginStaffID != state.SaleStaffID) {
          const SeviceDates = [row.ServiceStartDate, row.ServiceEndDate]
          state.orderServiceDateRef.showEdit(row, SeviceDates)
          console.log(SeviceDates, '实际服务时间')
        }
      }

      return {
        ...toRefs(state),
        handleEdit,
        open,
        realityEdit,
        EmitData,
        showList,
      }
    },
  })
</script>
